<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave()">
    <!-- 头部筛选和标题 -->
    <top-filter :title="reportName" ref="topFilter" :isShowHelp="this.isShowHelp" :helpContent="this.helpMessage">
      <double-check-filter :pageChange="pageChange" :isParentLinkChild="true"  @confirmDoubleSelect="planAreaSelect" defaultText="统筹区"
                           :filter="filterN" type="planArea"></double-check-filter>
      <single-list-filter-without-cb v-if="insuranceCode==1000" :filter="filterN" :type="'socialInsurance'"
                                     :pageChange="pageChange"
                                     :leftTipText="'险种'"
                                     @confirmSingleSelect="confirmSingleSelectSocialInsurance">
      </single-list-filter-without-cb>
      <single-list-filter-without-cb :filter="filterN"
                                     :pageChange="pageChange"
                                     :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
    </top-filter>
    <div class="chart-container" v-show="isShowChart">
      <div id="accumulativeAnalysis" class="chart-type1"></div>
      <Summarize :showSummarizeText="conclusion"></Summarize>
    </div>
  </div>
</template>

<script>
  import job from '../../../assets/img/chart-svg/job.svg'
  import career from '../../../assets/img/chart-svg/career.svg'
  import company from '../../../assets/img/chart-svg/company.svg'
  import other from '../../../assets/img/chart-svg/other.svg'
  import TopFilter from '../../last/filter/top-filter1'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import {setChartHeight, loadingOpt} from '../../../assets/js/utils.js'

  import {getPersonPayBaseOrgAnalysis} from '../../../api/api'

  export default {
    components: {
      TopFilter,
      DoubleCheckFilter,
      SingleListFilterWithoutCb,
      Summarize
    },
    props: ['isChange', 'filter','insuranceCode','insuranceText','pageChange'],
    data () {
      return {
        job:job,
        career,
        company,
        other,
        reportName: '累计缴费情况分析',
        filterN: JSON.parse(JSON.stringify(this.filter)),
        isShowChart: true,
        conclusion: '',
        areaCode: '',
        areaName: '',
        isShowHelp: true,
        queryYear:this.filter.years[0],
        helpMessage: '提示文字',
        insuranceType:this.filter.nc.insuranceTypes[0].selectId,
        insuranceName:this.filter.nc.insuranceTypes[0].selectName,
        dataJson:{}
      }
    },
    mounted () {
      setChartHeight();
      this.myChart = this.$echarts.init(document.getElementById('accumulativeAnalysis'));
      // 首次渲染
      let val = this.$route.params.id;
      if(val==1000){
        this.insuranceType = 1001;
      }else{
        this.insuranceType = val;
      }
      this.insuranceName = this.insuranceText;
      this.getAreaCode();
      this.queryYear = this.filter.years[0];
      this.getData();
      let that = this;
      // 点击事件
      this.chartClick();
    },
    activated () {
      this.getData();
    },
    watch: {
      pageChange(){
        let val = this.$route.params.id;
        if(val==1000){
          this.insuranceType = 1001;
        }else{
          this.insuranceType = val;
        }
        this.insuranceName = this.insuranceText;
        this.getAreaCode();
        this.queryYear = this.filter.years[0];
        this.myChart = this.$echarts.init(document.getElementById('accumulativeAnalysis'));
        this.getData();
        this.chartClick();
      },
      insuranceCode(val){},
      isChange () {
        setTimeout(() => {
          setChartHeight();
          setTimeout(() => {
            this.myChart.resize();
          }, 10);
        }, 101);
      }
    },
    methods: {
      getData () {
        // 给echart 加loading效果
        // console.log(this.areaCode)
        this.myChart.clear();
        this.myChart.showLoading(loadingOpt);
        getPersonPayBaseOrgAnalysis('person/payBaseOrgAnalysis',this.queryYear, this.areaCode, this.insuranceType).then(response => {
          let json = response.data;
          if (response.code === 0) {
            this.dataJson = json;
            this.isShowChart = true;
            this.myChart.hideLoading();
            this.reportName = json.reportName;
            this.conclusion = json.reportConclusion;
            this.drawLine(json)
          } else {
            this.isShowChart = false;
          }
        }).catch(res => {
          this.isShowChart = false;
        })
      },
      chartClick(){
        let that = this;
        this.myChart.off('click');
        this.myChart.on('click', function (params) {
          let hash = window.location.hash;
          let data = {
            queryYear: that.queryYear,
            areaCode: that.areaCode,
            areaName: that.areaName,
            insuredCode: that.insuranceType,
            name:params.name,
            insuredName: that.insuranceName,
            hash:hash
          };
          console.log(data);
          that.$router.push({
            path: `/application/analysis-of-cumulative-payment-detail`,
            query: data
          });
        })
      },
      getAreaCode(){
        let areaCode = [];
        let areaName = [];
        this.filter.nc.planArea.map((item, index) => {
          if (index > 0 && index <= 6) {
            areaCode.push(item.selectId)
            areaName.push(item.selectName);
          }
        });
        this.areaCode = areaCode.join(',');
        this.areaName = areaName.join('、');
      },
      planAreaSelect (selectedIdArr, selectedNameArr) {
        // 统筹区选择
        this.areaCode = selectedIdArr.join(',');
        this.areaName = selectedNameArr.join('、');
        this.getData();
      },
      //选择险种
      confirmSingleSelectSocialInsurance(filter,selectedName) {
        this.insuranceType = filter;
        this.insuranceName = selectedName;
        this.showLoading = true;
        this.getData()
      },
      chooseYear(year){
        this.queryYear = year;
        this.getData();
        //选择年份后执行事件
      },
      drawLine (json)  {
        let that = this;
        let x = ['1个月','2个月','3个月','4个月','5个月','6个月','7个月','8个月','9个月','10个月','11个月','12个月',];
        let num = [1.2,1,1.6,1.1,1.5,1.2,1,1.6,1.1,1.5,2,3];
        let rate = [23,12,45,23.13,12.11,23,12,45,23.13,12.11,23,12];
        this.myChart.setOption({
          grid: {
            left:40,
            bottom:30,
            right:40,
            top:60,
          },
          tooltip:{
            textStyle:{
              fontSize:12,
            },
            formatter:function(params){
              let i = params.dataIndex;
              let txt = `<p>累计缴费达${params.name}</p>
                         <p>人数：${params.value}万人</p>
                         <p>占比：${rate[i]}%</p>
                         <p style="color: #67ffdb;text-align: center;
                                line-height: 30px;height: 30px">单击查看人员画像</p>
              `;
              return txt;
            }
          },
          xAxis:{
            data: x,
            axisLine: { // x轴的横线是否显示
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisTick: { // x轴的刻度短竖线是否显示
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              interval:0,
              textStyle: {
                color: '#fff'
              }
            },
          },
          yAxis:{
            name: '单位 : 万人',
            nameTextStyle: {
              color: '#fff',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2a4565',
                type: 'dashed',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565',
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
          },
          series:[{
            type: 'bar',
            showSymbol: false,
            barGap: 0,
            itemStyle:{
              color:'#129cff',
              borderWidth:0
            },
            data: num,
            label:{
              show:true,
              position:'top',
              formatter:'{c}',
              color:'#fff'
            },
            barWidth: '40%',
            barMaxWidth:20,
          }]
        })
      },
      mouseenter () {
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
        this.$refs.topFilter._showChartTitle()
      },
    },
  }
</script>

<style scoped>


</style>
